// contact css here
.contact_page_section{
    padding: 174px 0 175px;
    @media #{$desktop-device}{
        padding: 110px 0 130px;
    }
    @media #{$tablet-device}{
        padding: 47px 0 80px;
    }
    @media #{$large-mobile}{
        padding: 22px 0 60px;
    }
    & .section_title {
        margin-bottom: 145px;
        @media #{$desktop-device}{
            margin-bottom: 90px;
        }
        @media #{$tablet-device}{
            margin-bottom: 50px;
        }
        @media #{$large-mobile}{
            margin-bottom: 30px;
        }
        
    }
}
.contact_page_details{
    & .container{
        max-width: 1005px;
    }
}

.contact_map {
    margin-bottom: 115px;
    @media #{$tablet-device}{
        margin-bottom: 67px;
    }
    @media #{$large-mobile}{
        margin-bottom: 48px;
    }
    & iframe{
        height: 805px;
        width: 100%;
        @media #{$laptop-device}{
            height: 600px;
        }
        @media #{$desktop-device}{
            height: 500px;
        }
        @media #{$tablet-device}{
            height: 350px;
        }
        @media #{$large-mobile}{
            height: 300px;
        }
    }
}

.form_input_inner {
    @media #{$large-mobile}{
        flex-wrap: wrap;
    }

}
.contact_form{
    & h3{
        font-size: 30px;
        line-height: 40px;
        font-weight: 700;
        margin-bottom: 40px;
        font-family: $dmsans;
        @media #{$tablet-device}{
            font-size: 25px;
            line-height: 26px;
            margin-bottom: 30px;
        }
        @media #{$large-mobile}{
            font-size: 24px;
            line-height: 30px;
            margin-bottom: 29px;
        }
    }
}

.form_input{
    width: 33.33%;
    margin-right: 20px;
    margin-bottom: 20px;
    &:last-child{
        margin-right: 0;
    }
    @media #{$large-mobile}{
        width: 100%;
        margin-right: 0;
    }
    & input{
        width: 100%;
        height: 43px;
        padding: 0 18px;
        font-weight: 500;
        &:focus{
            border-color: #ccc !important;
            color: #000000;
        }
        &:focus::-webkit-input-placeholder{
            color: #000000;
        }
    }
    
}

.form_textarea{
    & textarea{
        width: 100%;
        padding: 10px 18px;
        height: 198px;
        resize: none;
        font-weight: 500;
        @media #{$tablet-device}{
            height: 170px;
        }
        @media #{$large-mobile}{
            height: 120px;
        }
        &:focus{
            border-color: #ccc !important;
            color: #000000;
        }
        &:focus::-webkit-input-placeholder{
            color: #000000;
        }
    }
}
.contact_info{
    margin-bottom: 150px;
    @media #{$tablet-device}{
        margin-bottom: 73px;
    }
    @media #{$large-mobile}{
        margin-bottom: 23px;
    }
}
.contact_info_title {
    margin-bottom: 58px;
    @media #{$tablet-device}{
        margin-bottom: 30px;
    }
    @media #{$large-mobile}{
        margin-bottom: 30px;
    }
    & h3{
        font-size: 30px;
        line-height: 45px;
        font-weight: 700;
        margin-bottom: 0;
        font-family: $dmsans;
        @media #{$tablet-device}{
            font-size: 24px;
            line-height: 38px;
        }
        @media #{$large-mobile}{
            font-size: 22px;
            line-height: 35px;
        }
        @media #{$small-mobile2}{
            font-size: 20px;
            line-height: 30px;
        }
    }
}
.contact_info_inner {
    @media #{$large-mobile}{
        flex-wrap: wrap;
    }
}
.contact_info_list{
    width: 33.33%;
    margin-right: 65px;
    position: relative;
    @media #{$tablet-device}{
        margin-right: 30px;
    }
    @media #{$large-mobile}{
        width: 45%;
        margin-right: 40px;
        margin-bottom: 25px;
        &:nth-child(2){
            margin-right: 0;
        }
    }
    @media #{$small-mobile2}{
        width: 100%;
        margin-right: 0;
    }
    &:last-child{
        margin-right: 0;
    }
    & h3{
        font-size: 16px;
        line-height: 48px;
        font-weight: 700;
        text-transform: uppercase;
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 23px;
        font-family: $dmsans;
        @media #{$tablet-device}{
            font-size: 16px;
            line-height: 42px;
            margin-bottom: 15px;
        }
        @media #{$large-mobile}{
            font-size: 15px;
            line-height: 40px;
            margin-bottom: 16px;
        }
        & i{
            float: right;
            line-height: 47px;
            font-size: 20px;
            color: #e5c592;
            @media #{$tablet-device}{
                line-height: 40px;
                font-size: 18px;
            }
            @media #{$large-mobile}{
                line-height: 40px;
                font-size: 17px;
            }
        }
    }
    & p{
        font-size: 16px;
        line-height: 30px;
        color: #010101;
        letter-spacing: 0;
        @media #{$tablet-device}{
            font-size: 15px;
            line-height: 27px;
        }
        & a{
            &:hover{
                color: $secondary_color;
            }
        }
    }
}

.form_input_btn {
    margin-top: 43px;
    @media #{$tablet-device}{
        margin-top: 30px;
    }
    @media #{$large-mobile}{
        margin-top: 25px;
    }
}
